<extend name="template/base_index2" />

<block name="area_header">
	
	<style type="text/css">
		html{
			font-size: 10px;
		}
		/**
		 * 顶部样式
		 */
		.header{
			background: #FFFFFF;
		}
		.header{
			font-size: 16px;
		}
		.header .am-topbar{
			font-size: 18px;
  			padding: 5px 16px;
  			min-height: 20px;
  			margin-bottom: 0px;
		}
		.am-with-topbar-fixed-top {
		  	padding-top:  39px;
		}
		.theme-shop .am-gotop-fixed{
		  width: 32px;
		  height: 32px;
		  bottom: 64px;
  		}
  		.theme-shop .am-gotop-fixed .am-gotop-icon {
		  width: 32px;
		  height: 32px;
		  line-height: 28px;
  		}
		.myorder .am-tabs-nav{
			width:100%;
		}
		.myorder .am-nav-tabs>li{
			width:20%;
		}
		.myorder .am-nav-tabs>li>a{
			font-size: 1.2rem;
			margin: 0px;
		}
		.myorder .am-nav-tabs>li.am-active>a{
			border: 0px;
			color: #F72E5C;
			background-color: #FAF2F2;
			border-bottom: 1px solid #F72E5C;
			cursor: default;
		}
		.myorder .empty{
			padding: 20px 0px;
		}
		.myorder .empty i{
			font-size: 32px;
		}
		
		.item-p-list{
			
		}
		
		.item-p-list .item-p{
			position: relative;
			font-size: 0.9rem;
			border-bottom: 1px solid #E2E2E1;
			height: 60px;
			
		}
		.item-p img{
			width: 36px;
			height: 48px;
			position: absolute;
		}
		.item-p .pc-wrp{
			position: absolute;
			right: 0px;
			top:0px;
			line-height: 1.0;
			
		}
		.item-p .p-name{
			height: 2rem;
			line-height: 1;
  			width: 100%;
  			padding-left: 50px;
  			padding-right: 70px;
			
		}
		.item-p .p-desc{
			height: 1rem;
			line-height: 1;
  			width: 100%;
  			padding-left: 50px;
  			padding-right: 70px;
		}
		.myorder .order-item{
			background: #FFFFFF;
			padding: 10px;
			margin: 10px 0px;
		}
		.order-item>a{
			color: #414649;
		}
		.am-tabs-bd .am-tab-panel{
			padding: 0px;
		}
		
		.am-icon-weixin{
			color: #DA955C;
		}
		.store-info-wrp{
			border-bottom: 1px solid #E2E2E1;
			margin-bottom: 10px;
		}
	</style>

	
</block>

<block name="area_body">
	
	<div class="header">
		<div class="am-topbar am-topbar-default am-topbar-fixed-top"><a href="{:U('Shop/User/info')}"><i class="am-icon-chevron-left"></i>&nbsp;&nbsp;我的订单</a> <a href="{:U('Shop/Index/index')}"><i class="am-icon-home am-icon-sm am-fr"></i></a></div>
		
	</div>
	<div class="myorder">
		
		<div class="am-tabs" data-am-tabs="{noSwipe: 1}">
		  <ul id="tabs" class="am-tabs-nav am-nav am-nav-tabs">
		    <li class="<eq name='datatype' value='0' >am-active</eq> "><a href="#tab1" data-type='0' >全部</a></li>
		    <li class="<eq name='datatype' value='1' >am-active</eq> "><a href="#tab2" data-type='1' >待付款</a></li>
		    <li class="<eq name='datatype' value='2' >am-active</eq> "><a href="#tab3" data-type='2' >待发货</a></li>
		    <li class="<eq name='datatype' value='3' >am-active</eq> "><a href="#tab4" data-type='3' >待收货</a></li>
		    <li class="<eq name='datatype' value='4' >am-active</eq> "><a href="#tab5" data-type='4' >待评价</a></li>
		  </ul>
		
		  <div class="am-tabs-bd">
		    <div class="am-tab-panel am-fade <eq name='datatype' value='0' >am-in am-active</eq> " id="tab1">
		    		
		    		<div class="panel"></div>
		    		<div class="empty am-text-center  am-hide">
			    		<div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
			    		<div class="am-text-sm am-padding-sm">您还没有相关订单</div>
			    		<div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
			    		<div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
		    		</div>
		    </div>
		    <div class="am-tab-panel am-fade <eq name='datatype' value='1' >am-in am-active</eq> " id="tab2">
		    		<div class="panel"></div>
		    		<div class="empty am-text-center  am-hide">
			    		<div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
			    		<div class="am-text-sm am-padding-sm">您还没有相关订单</div>
			    		<div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
			    		<div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
		    		</div>
		    	
		    </div>
		    <div class="am-tab-panel am-fade <eq name='datatype' value='2' >am-in am-active</eq> " id="tab3">
		    		<div class="panel"></div>
		    		<div class="empty am-text-center  am-hide">
			    		<div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
			    		<div class="am-text-sm am-padding-sm">您还没有相关订单</div>
			    		<div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
			    		<div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
		    		</div>
		    	
		    </div>
		    <div class="am-tab-panel am-fade <eq name='datatype' value='3' >am-in am-active</eq> " id="tab4">
		    		<div class="panel"></div>
		    		<div class="empty am-text-center am-hide">
			    		<div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
			    		<div class="am-text-sm am-padding-sm">您还没有相关订单</div>
			    		<div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
			    		<div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
		    		</div>
		    	
		    </div>
		    <div class="am-tab-panel am-fade <eq name='datatype' value='4' >am-in am-active</eq> " id="tab5">
		    		<div class="panel"></div>
		    		<div class="empty am-text-center am-hide">
			    		<div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
			    		<div class="am-text-sm am-padding-sm">您还没有相关订单</div>
			    		<div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
			    		<div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
		    		</div>
		    </div>
		  </div>
		</div>
		
		
		
	</div>
</block>

<block name="area_footer">
	<script id="ordertemplate" type="text/x-handlebars-template">
	{{#each data}}
	
	  <div class="order-item">
	  	<div class="store-info-wrp am-cf  am-text-xs am-margin-bottom-xs">
	  			<div class="store-info am-fl">
	  			<img  src="{{_store.logo}}" alt="logo" class="am-fl am-margin-bottom-xs am-margin-right-xs am-responsive-width am-thumbnail am-radius" style="width: 20px;" />
	  			<span class="am-margin-right-xs am-text-xs">{{_store.name}}<i class="am-icon-chevron-right am-margin-left-xs"></i></span>

                </div>
	  			<div class="order_status  am-text-danger am-fr">{{order_status_desc}}</div>
	  	</div>	
	  	<a href="{:U('Shop/Orders/view')}?id={{orderid}}">
	  	
	  	<div class="item-p-list">
	  		  {{#each _items}}
	  		  <div class="item-p am-margin-top-xs am-cf">
	  		  	<img src="{{img}}" class="am-fl" alt="商品图片" />
	  		  	<div class="p-name am-text-truncate">{{name}}</div>
			  	<div class="p-desc am-text-truncate">{{sku_desc}}</div>
			  	<div class="pc-wrp am-fr">
		  		  <div class="p-price"><h6>¥{{price}}</h6></div>
		  		  <div class="p-count am-link-muted am-text-xs am-text-right">x{{count}}</div>
		  		</div>
	  		  </div>
	  		  {{/each}}
	  	</div>
	  	
	  	
	  	</a>
	  	<div class="btn-controls  am-padding-sm am-text-right">
	  		<!--
              	作者：hebiduhebi@126.com
              	时间：2015-05-02
              	描述：根据订单状态来显示可操作按钮
              	1. 待付款 － 立即支付，取消订单
              	2. 待发货 － 提醒发货，
              	3. 待评价 － 立即评价
              	4. 待收货 － 确认收货
              	5. 全部 － 删除订单［］
              -->
              {{#eq pay_status 0}}
              <a href="{:U('Shop/Pay/pay')}?id={{orderid}}" class="am-btn-xs am-btn am-btn-primary">立即支付</a>
              <a href="{:U('Shop/Orders/cancelOrder')}?id={{orderid}}" data-tip="确定取消订单?操作无法恢复!" class="ajax-get confirm am-btn-xs am-btn am-btn-default">取消订单</a>              
	  		 {{/eq}}

            {{#eq pay_status 1}}

            <span class="am-text-xs am-text-danger">已支付</span><br/>
            {{/eq}}
              
              {{#eq pay_status 5}}
              
              <span class="am-text-xs">您选择了货到付款,请准备好现金，<br />送货员马上就到！</span><br/>
              {{/eq}}
              
              {{#eq order_status 3}}
              <span class="am-text-xs">店铺微信号: {{_store.wxno}},联系电话: <a href="tel:{{_store.service_phone}}">{{_store.service_phone}}</a></span>
              <!--<a class="am-btn-xs am-btn am-btn-default">提醒发货</a>-->
              {{/eq}}
              <!--<a class="am-btn-xs am-btn am-btn-default">立即评价</a>-->
              
              {{#eq order_status 4}}
              <a href="{:U('Shop/Orders/confirmReceive')}?id={{orderid}}" data-tip="确定收到货了?" class="ajax-get confirm am-btn-xs am-btn am-btn-primary">确认收货</a>
              {{/eq}}
              
              
               
              {{#eqs order_status 5 comment_status 0}}
               
              	<a href="{:U('Shop/Orders/evaluation')}?id={{orderid}}" class="am-btn-xs am-btn am-btn-secondary">订单评价</a>
              
              {{/eqs}}
              
              
              {{#eq order_status 12}}
              <span class="am-text-xs am-text-danger">因卖家退回订单,若您已支付,将退款给您,请注意核查!</span>
              {{/eq}}
              <!--<a class="am-btn-xs am-btn am-btn-primary">删除订单</a>-->
              
	  	</div>
	  </div>
	  {{/each}}
	</script>
	
	<script type="text/javascript" src="__CDN__/handlebar/3.0.3/handlebars.js?v=1.0"></script>
	
	<script type="text/javascript">
		function eq(v1,v2,options){
           if(v1 == v2){
             //满足添加继续执行
             return options.fn(this);
           }else{
             //不满足条件执行
             return options.inverse(this);
           }
         }
		
		
		function eqs(v1,v2,v3,v4,options){
           if(v1 == v2&&v3==v4){
             //满足添加继续执行
             return options.fn(this);
           }else{
             //不满足条件执行
             return options.inverse(this);
           }
         }


	    
		
	
		$(function(){
			
			window.boye = {
				ajaxing:false,
				prevType:'',
				currentType:'',
				currentPage:0,
				template:'',
			};
			window.boye.prevType = window.boye.currentType = $("#tabs .am-active").find("a").attr("data-type");
			var source  = $("#ordertemplate").html();
			window.boye.template = Handlebars.compile(source);
			Handlebars.registerHelper("eq",eq);
			Handlebars.registerHelper("eqs",eqs);
			
			$('#tabs').find('a').on('opened.tabs.amui', function(e) {
				console.log('[%s] 选项卡打开了', $(this).text());
				
				var $ele = loadingMsg();
				if(window.boye.ajaxing){
					console.log("Waiting ajax!");
					return ;
				}
				window.boye.prevType = window.boye.currentType;
				window.boye.currentType = parseInt($(this).attr("data-type"));
				
				window.boye.ajaxing = false;
				
				queryOrders($ele);
				
			});
			
			var $ele = loadingMsg();
			queryOrders($ele);
			window.boye.currentPage++;

			window.boye.prevScrollY = 0;
			window.boye.directionY = 1;
			$(window).on("scroll",function(ev){
				
				if(window.boye.prevScrollY - $(window).scrollTop() > 0){
					window.boye.directionY = -1;
				}else{
					window.boye.directionY = 1;
				}
				
				window.boye.prevScrollY = $(window).scrollTop();
				
				if(window.boye.directionY == 1 && $(document).height() - $(window).height() - $(window).scrollTop() < 10){
					var $ele = loadingMsg();
					queryOrders($ele);
				}
			});
			
		})
		
		function queryOrders($ele){
				console.log(window.boye);
				//上一次type 不等于这一次 说明不是滚动获取
				if(window.boye.prevType != window.boye.currentType){
					window.boye.currentPage = 1;
				}
				$.ajax({
					url:"{:U('Shop/Orders/orderlist')}",
					type:"POST",
					data: {type:window.boye.currentType,p:window.boye.currentPage},
					dataType:"json",
					beforeSend:function(){
						window.boye.ajaxing = true;
					}
				}).always(function(){
					$ele.modal("close");		
					window.boye.ajaxing = false;
						
				}).done(function(data){
					window.boye.currentPage++;
//					console.log(data);
					if(data.status){
						console.log(data.info,'获取的订单数据');
						var type = parseInt(window.boye.currentType) + 1;
						var panel = $("#tab"+type).find(".panel");
						var orders = panel.find(".order-item");
						console.log(orders);
						
						if(!data.info ||  (orders.length == 0 && data.info.length == 0)){
							$("#tab"+type).find(".empty").removeClass("am-hide");
							$("#tab"+type).find(".panel").html("");
						}else{
							if(data.info.length == 0){
								console.log("数据为空");
							}else{
								$("#tab"+type).find(".empty").addClass("am-hide");
								var html = window.boye.template({data:data.info});
//								console.log($("#tab"+type).find(".panel"));
								if(window.boye.prevType != window.boye.currentType){
									$("#tab"+type).find(".panel").html(html);
								}else{
									$("#tab"+type).find(".panel").html($("#tab"+type).find(".panel").html()+html);
								}
								
								window.hbd_mobile.rebindAjaxGet("#tab"+type+" .ajax-get");
							}
							
						}

					}else{
						alertMsg(data.info);
					}
				}).fail(function(data){
					alertMsg(data.responseText);
				});
		}
	</script>
	
</block>